<%--
  Created by IntelliJ IDEA.
  User: Wang Ziming
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<style>
    .nav-head{
        /*使得占满整个屏幕 margin*/
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        /*使得占满整个屏幕 padding;两种方式都没有用*/
        padding-top: 0px;
        /*指明背景颜色*/
        background-color: black;
        /*背景透明度*/
        opacity: 70%;
        height: 30px;
    }
    /*导航栏文字*/
    .nav-text{
        /*设置字体水平对齐方式*/
        /*text-align: center;*/
        /*文字颜色*/
        color: aliceblue;
        font-family: 华文行楷;
        font-size: 20px;
    }
</style>

<body>
<%--导航--%>
<%--使用div的目的是为了让以上内容处于一行上--%>
<div class="nav-head">
    <nav class="gird-header">
        <div class="nav-text" align="center">
            <%--左侧文字栏，导航页--%>
            <span class="nav-text-left">
                <span><a href="${pageContext.request.contextPath}/index.jsp">首页</a></span> &nbsp;
                <span><a>队伍</a></span> &nbsp;
                <span><a href="recommend">推荐</a></span> &nbsp;
            </span>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <%--搜索栏--%>
            <span class="nav-text-search">
                <input type="text" class="nav-search-group">查询队伍
                <input type="text" class="nav-search-destination">查询出游地
            </span>
            <%--右侧登录、注册--%>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="nav-text-right" align="right">
                <%--href="login"到达的是方法体，进行相应操作之后进入到login.jsp页面--%>
                <span><a href="login">登录</a></span>&nbsp;
                <span><a href="register">注册</a></span>
            </span>
        </div>
    </nav>
</div>
</body>
</html>
